import React, { useState, useEffect } from 'react'

const MouseTracker: React.FC = () => {
	const [ positions, setPositions ] = useState({x: 0, y: 0})
	
	// useEffect
  useEffect(() => {
    console.log('add effect', positions.x)
    const updateMouse= (e: MouseEvent) => {
      console.log('inner')
      setPositions({ x: e.clientX, y: e.clientY })
    }
		document.addEventListener('click', updateMouse)
		// 清除
    return () => {
      console.log('remove effect', positions.x)
      document.removeEventListener('click', updateMouse)
    }
  }, [])
  console.log('before render', positions.x)
  return (
    <p>X: {positions.x}, Y : {positions.y}</p>
  )
}

export default MouseTracker